<template>
    <div class="app-container">
        <el-card>
            <el-tabs v-model="activeName" class="demo-tabs" @tab-change="tableChange">
                <el-tab-pane label="未处置" name="1">
                    <notDisposed v-if="activeName == '1'" ref="notDisposedRef"></notDisposed>
                </el-tab-pane>
                <el-tab-pane label="已处置" name="2">
                    <disposed v-if="activeName == '2'" ref="disposedRef"></disposed>
                </el-tab-pane>
                <el-tab-pane label="留样库" name="3">
                    <retentionView v-if="activeName == '3'" ref="retentionViewRef"></retentionView>
                </el-tab-pane>
            </el-tabs>
        </el-card>
    </div>
</template>

<script setup name="Retention">
import { nextTick } from 'vue';
import notDisposed from "./components/notDisposed.vue";
import disposed from "./components/disposed.vue";
import retentionView from "./components/retentionView.vue";

const activeName = ref("1")

const notDisposedRef = ref(null)
const disposedRef = ref(null)
const retentionViewRef = ref(null)

tableChange(activeName.value)

function tableChange(name) {
    nextTick(() => {
        if(name == "2") {
            disposedRef.value.getList()
        } else if(name == "3") {
            retentionViewRef.value.getList()
        }
    })
}

</script>
